<template>
  <div>
    <div id="myChart" :style="{width: '800px', height: '400px'}"></div>
  </div>
</template>

<script>
import echart from 'echarts'
import 'echarts/map/js/china'
// import echarts from 'echarts2/chart'
export default {
  props: {
    width: {
      type: Number,
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
    charData: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data () {
    return {
      option: {
        title: {
          text: '2011全国GDP（亿元）',
          subtext: '数据来自国家统计局'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          x: 'right',
          selectedMode: false,
          data: ['北京', '上海', '广东']
        },
        dataRange: {
          orient: 'horizontal',
          min: 0,
          max: 55000,
          text: ['高', '低'],
          splitNumber: 0
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          x: 'right',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false }
          }
        },
        series: [
          {
            name: '2011全国GDP分布',
            type: 'map',
            mapType: 'china',
            mapLocation: {
              x: 'left'
            },
            selectedMode: 'multiple',
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } }
            },
            data: [
              { name: '西藏', value: 60.83 },
              { name: '青海', value: 167.44 },
              { name: '宁夏', value: 210.21 },
              { name: '海南', value: 252.66 },
              { name: '甘肃', value: 502.37 },
              { name: '贵州', value: 570.84 },
              { name: '新疆', value: 661.05 },
              { name: '云南', value: 889.12 },
              { name: '重庆', value: 1001.37 },
              { name: '吉林', value: 105.83 },
              { name: '山西', value: 112.55 },
              { name: '天津', value: 113.28 },
              { name: '江西', value: 117.82 },
              { name: '广西', value: 117.87 },
              { name: '陕西', value: 125.3 },
              { name: '黑龙江', value: 125 },
              { name: '内蒙古', value: 143.88 },
              { name: '安徽', value: 153.65 },
              { name: '北京', value: 162.93, selected: true },
              { name: '福建', value: 175.18 },
              { name: '上海', value: 191.69, selected: true },
              { name: '湖北', value: 196.26 },
              { name: '湖南', value: 196.56 },
              { name: '四川', value: 210.68 },
              { name: '辽宁', value: 222.7 },
              { name: '河北', value: 245.76 },
              { name: '河南', value: 269.03 },
              { name: '浙江', value: 323.85 },
              { name: '山东', value: 453.85 },
              { name: '江苏', value: 491.27 },
              { name: '广东', value: 532.28, selected: true }
            ]
          },
          {
            name: '2011全国GDP对比',
            type: 'pie',
            roseType: 'area',
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            radius: [30, 120],
            data: [
              { name: '北京', value: 162.93 },
              { name: '上海', value: 191.69 },
              { name: '广东', value: 532.28 }
            ]
          }
        ],
        animation: false
      }
    }
  },
  mounted () {
    this.drawChart()
  },
  watch: {
  },
  methods: {
    drawChart () {
      console.log('11111111')
      var myChart = echart.init(document.getElementById('myChart'))
      console.log(myChart)
      myChart.setOption({
        title: {
          text: '2011全国供应商（分布）'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          x: 'right',
          selectedMode: false,
          data: ['北京', '上海', '广东']
        },
        dataRange: {
          orient: 'horizontal',
          min: 0,
          max: 3000,
          text: ['高', '低'],
          splitNumber: 0
        },
        toolbox: {
          show: false,
          orient: 'vertical',
          x: 'right',
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false }
          }
        },
        series: [
          {
            name: '2011全国供应商分布',
            type: 'map',
            mapType: 'china',
            mapLocation: {
              x: 'left'
            },
            // selectedMode: 'multiple',
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } }
            },
            data: [
              { name: '西藏', value: 605 },
              { name: '青海', value: 1670 },
              { name: '宁夏', value: 1102 },
              { name: '海南', value: 1522 },
              { name: '甘肃', value: 1020 },
              { name: '贵州', value: 1701 },
              { name: '新疆', value: 1610 },
              { name: '云南', value: 1893 },
              { name: '重庆', value: 1011 },
              { name: '吉林', value: 1568 },
              { name: '山西', value: 1237 },
              { name: '天津', value: 1307 },
              { name: '江西', value: 1702 },
              { name: '广西', value: 1720 },
              { name: '陕西', value: 1512 },
              { name: '黑龙江', value: 582 },
              { name: '内蒙古', value: 359 },
              { name: '安徽', value: 1530 },
              { name: '北京', value: 1621, selected: true },
              { name: '福建', value: 1756 },
              { name: '上海', value: 1919, selected: true },
              { name: '湖北', value: 19632 },
              { name: '湖南', value: 19669 },
              { name: '四川', value: 2102 },
              { name: '辽宁', value: 2222 },
              { name: '河北', value: 2451 },
              { name: '河南', value: 26931 },
              { name: '浙江', value: 3231 },
              { name: '山东', value: 453 },
              { name: '江苏', value: 5911 },
              { name: '广东', value: 532, selected: true }
            ]
          },
          {
            name: '2011全国供应商对比',
            type: 'pie',
            roseType: 'area'
            // tooltip: {
            //   trigger: 'item',
            //   formatter: '{a} <br/>{b} : {c} ({d}%)'
            // }
            // radius: [30, 120],
            // data: [
            //   { name: '北京', value: 16251.93 },
            //   { name: '上海', value: 19195.69 },
            //   { name: '广东', value: 53210.28 }
            // ]
          }
        ]
      })
      // var ea = require('echarts2/config')
      // myChart.on(ea.EVENT.MAP_SELECTED, function (param) {
      //   console.log('11111111111111')
      //   var selected = param.selected
      //   var mapSeries = this.option.series[0]
      //   var data = []
      //   var legendData = []
      //   var name
      //   for (var p = 0, len = mapSeries.data.length; p < len; p++) {
      //     name = mapSeries.data[p].name
      //     // mapSeries.data[p].selected = selected[name];
      //     if (selected[name]) {
      //       data.push({
      //         name: name,
      //         value: mapSeries.data[p].value
      //       })
      //       legendData.push(name)
      //     }
      //   }
      //   this.option.legend.data = legendData
      //   this.option.series[1].data = data
      //   myChart.setOption(this.option, true)
      // })
    }
  }
}
</script>
